<template>
  <div>
    <div class="menu">
      <template v-for="(menuItem, index) in props.menuConfig" :key="index">
        <template v-if="menuItem.isDivider">
          <el-divider />
        </template>

        <el-tooltip
          :effect="tooltipTheme"
          :content="menuItem.descript"
          :placement="tooltipPlacement"
          :disabled="disabledTooltip"
        >
          <div class="menu-item flex-center">
            <span class="title">{{ menuItem.label }}:</span>
            <div class="config">
              <template v-if="menuItem.type === 'input'">
                <el-input v-model="configAttr[menuItem.field]" size="small" />
              </template>

              <template v-else-if="menuItem.type === 'enmu'">
                <el-select v-model="configAttr[menuItem.field]" size="small">
                  <el-option v-for="item in menuItem.list" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </template>

              <template v-else-if="!menuItem.type || menuItem.type === 'switch'">
                <el-switch v-model="configAttr[menuItem.field]" size="small" active-text="on" inactive-text="off" />
              </template>
            </div>
          </div>
        </el-tooltip>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";

export interface Props {
  menuConfig: CommonMenuType;
  modelValue: any;
  tooltipTheme?: "dark" | "light";
  tooltipPlacement?:
    | "top"
    | "top-start"
    | "top-end"
    | "bottom"
    | "bottom-start"
    | "bottom-end"
    | "left"
    | "left-start"
    | "left-end"
    | "right"
    | "right-start"
    | "right-end";
  disabledTooltip?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  menuConfig: () => [],
  modelValue: () => ({} as any),
  tooltipTheme: "light",
  tooltipPlacement: "left",
  disabledTooltip: false
});

const emit = defineEmits(["update:modelValue"]);

const configAttr = computed({
  get() {
    return props.modelValue;
  },
  // 配置更新
  set(val) {
    emit("update:modelValue", val);
  }
});
</script>

<style lang="scss" scoped>
.menu {
  width: 100%;
  .menu-item {
    margin: 4px;
    .title {
      flex: 1;
      font-size: 12px;
    }
    .config {
      flex: 1;
      text-align: center;
    }
  }

  :deep(div.el-divider.el-divider--horizontal) {
    margin: 18px 0;
  }
}
</style>
